<template>
  <div class="addShop">
    <el-dialog :visible="showAdd" :title="isAdd" width="80%" @close="handleCancel">
      <template>
        <el-tabs>
          <el-tab-pane label="基础信息">
            <div class="content">
              <el-form ref="baseInfo" label-width="120px" :model="formData" :rules="rules">
                <el-form-item label="店铺名称" prop="shopName">
                  <el-input v-model="formData.shopName" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="分店名称" prop="subbranchName">
                  <el-input v-model="formData.subbranchName" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="所属行业" prop="industryName">
                  <el-select v-model="formData.industryName" placeholder="请选择">
                    <el-option
                      v-for="item in industryList"
                      :key="item.id"
                      :label="item.industryName"
                      :value="item.industryName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="身份证号" prop="ID">
                  <el-input v-model="formData.ID" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="注册邮箱" prop="email">
                  <el-input v-model="formData.email" placeholder="请输入" style="width:40%" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="formData.address" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="电话" prop="tel">
                  <el-input v-model="formData.tel" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="推广人名称" prop="promoter">
                  <el-input v-model="formData.promoter" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="权益级别" prop="rightsLevel">
                  <el-select v-model="formData.equitiesName">
                    <el-option
                      v-for="item in equitiesId"
                      :key="item.id"
                      :label="item.equitiesName"
                      :value="item.equitiesId"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="权益时效" prop="equitiesTime">
                  <el-input v-model="formData.equitiesTime" placeholder="请输入权益时效" style="width:41%" />
                </el-form-item>
                <el-form-item label="销售额" prop="sale">
                  <el-input v-model="formData.sale" placeholder="请输入" style="width:41%" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                  <el-select v-model="formData.status">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="性质" prop="nature">
                  <el-select v-model="formData.nature">
                    <el-option
                      v-for="item in formData.natures"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="formData.remark" placeholder="请输入备注" style="width:41%" />
                </el-form-item>
                <el-form-item label="营业时间">
                  <el-time-picker v-model="job.startTime" placeholder="开始时间点" style="width:30%;margin-right:10px" />
                  <el-time-picker v-model="job.endTime" placeholder="结束时间点" style="width:30%" />
                </el-form-item>
                <el-form-item label="单选" prop="method">
                  <el-radio v-model="formData.method" label="独立运营">独立经营</el-radio>
                  <el-radio v-model="formData.method" label="共线经营">共享经营</el-radio>
                </el-form-item>
              </el-form>
              <div class="mainWork" style="display:flex">
                主要产品： <upload-avatar />
              </div>
            </div>
            <div class="upload">
              <div class="shopAvatar" style="display:flex">
                店铺头像： <upload-avatar />
              </div>
              <div class="businessAvatar" style="display:flex;margin-top:10px">
                营业执照: <upload-avatar />
              </div>
              <div class="uploadAvatar" style="display:flex;margin-top:10px">
                上传证件: <upload-avatar />
              </div>
              <div class="shopsAvatar" style="display:flex;margin-top:10px">
                店铺实拍: <upload-avatar />
              </div>
              <div class="btn">
                <el-row type="flex" justify="center">
                  <el-button type="primary" @click="btnOk">确定</el-button>
                  <el-button>取消</el-button>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品/配送方式">
            <el-form label-width="120px">
              <el-form-item label="是否到店">
                <el-radio v-model="store.is" label="1">是</el-radio>
                <el-radio v-model="store.no" label="2">不是</el-radio>
              </el-form-item>
              <el-form-item label="是否支持同城配送">
                <el-radio v-model="store.is" label="1">支持</el-radio>
                <el-radio v-model="store.no" label="2">不支持</el-radio>
              </el-form-item>
              <el-form-item label="起配费用：">
                <el-input placeholder="请输入" />
              </el-form-item>
              <el-form-item label="每公里/元：">
                <el-input placeholder="请输入" />
              </el-form-item>
              <el-form-item label="配送时间：">
                <el-date-picker
                  v-model="job.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  style="width:19%"
                />
                <el-date-picker
                  v-model="job.endTime"
                  type="datetime"
                  style="width:19%;margin-left:15px"
                  placeholder="选择结束时间"
                />
              </el-form-item>
              <el-button type="primary">确定</el-button>
              <el-button>取消</el-button>
            </el-form>
            <el-form>
              <el-form-item label="是否支持区域配送">
                <el-radio v-model="store.is" label="1">是</el-radio>
                <el-radio v-model="store.no" label="2">不是</el-radio>
              </el-form-item>
              <el-form-item label="起配费用：">
                <el-input placeholder="请输入" />
              </el-form-item>
              <el-form-item label="每公里/元：">
                <el-input placeholder="请输入" />
              </el-form-item>
              <el-form-item label="配送范围/公里：">
                <el-input placeholder="请输入" />
              </el-form-item>
              <el-form-item label="配送时间：">
                <el-date-picker
                  v-model="job.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  style="width:19%"
                />
                <el-date-picker
                  v-model="job.endTime"
                  type="datetime"
                  style="width:19%;margin-left:15px"
                  placeholder="选择结束时间"
                />
              </el-form-item>
              <el-button type="primary">确定</el-button>
              <el-button>取消</el-button>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { edit, getIndustry, addShop, equities } from '@/api/shopList'
export default {
  props: {
    showAdd: {
      type: Boolean,
      default: false
    },
    date: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        ID: ''
      },
      job: {
        value: '',
        startTime: '',
        endTime: ''
      },
      // 行业
      industryList: [],
      // 是否到店
      store: {
        is: '1',
        no: ''
      },
      // 放置权益级别
      equitiesId: [],
      rules: {
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }, { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        subbranchName: [
          { required: true, message: '请输入分店名称', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        industry: [
          { required: true, message: '请选择所属行业', trigger: 'blur' }
        ],
        ID: [{ required: true, message: '请填写身份证号', trigger: 'blur' },
          { min: 10, max: 10, mssage: '长度为 18 个字符', trigger: 'blur' }],
        email: [{ required: true, message: '请填写邮箱', trigger: 'blur' }],
        method: [{ required: true, message: '请填写经营模式', trigger: 'blur' }],
        address: [{ required: true, message: '请填写地址', trigger: 'blur' }],
        tel: [{ required: true, message: '请填写电话', trigger: 'blur' }],
        promoter: [{ required: true, message: '请填写推广人名称', trigger: 'blur' }]
      },
      // 状态栏
      status: [{
        id: 1,
        name: '未开始'
      }, { id: 2,
        name: '进行中' }, { id: 3,
        name: '成功' }, { id: 4,
        name: '失败' }, { id: 5,
        name: '警告' }],
      // 性质栏
      natures: [{ id: 1, name: '共线运营' }, { id: 2, name: '运营中' }, { id: 1, name: '停运' }]
    }
  },
  computed: {
    isAdd() {
      return this.date.id ? '编辑' : '新增'
    }
  },
  created() {
    this.job = this.date
    this.getIndustry()
    this.formData = this.date
    this.equities()
  },
  methods: {
    async getIndustry() {
      const res = await getIndustry()
      this.industryList = res.data.data
    },
    handleCancel() {
      this.$emit('update:showAdd', false)
      this.$emit('update:date', {})
    },
    btnOk() {
      this.$refs.baseInfo.validate(async(valid) => {
        if (valid) {
          if (this.formData.id) {
            // 编辑
            await edit({ ...this.formData, businessHours: [this.job.startTime, this.job.endTime] })
            this.$message.success('修改商铺成功')
            this.$emit('update:showAdd', false)
          } else {
            // 新增
            await addShop({ ...this.formData, id: '' })
            this.$message.success('新增商铺成功')
            this.$emit('addShop', false)
          }
        }
      })
    },
    /**
     * 获取所有权益
     */
    async equities() {
      const { data } = await equities()
      this.equitiesId = data.data
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tab-pane{
  position: relative;
  display: flex;
}
/deep/ .el-form-item__content{
  display: flex;
  margin-top: 13px;
}
.upload{
  margin-left: 50px;
}
</style>
